按照鐵人賽的規則，只要發文30篇即可，但是我不小心把 Day5 給刪了，所以才會有 Day31 的出現
雖然我中間因為忘記發文早已失去資格了
但是這裡我還是會繼續寫下去把我學習 Vue 的筆記給整理過來，好梳理自己的思緒

接下來這篇要講到 Vue Router 新增路由路徑及連結
我們在 src 資料夾底下的 components 資料夾底下新增一個 pages 資料夾用於管理分頁元件
接著把 HelloWorld.vue 另存新檔到 pages 資料夾底下為 page.vue
裡面的內容留下

<template>
	<div class="hello">
	</div>
</template>

<script>
export default {
	data() {
	return
	}
}
</script>

即可

接著我們把 Bootstrap 的 card 貼到 page 元件內:

<template>
    <div class="hello">
        <div class="card" style="width: 18rem;">
            <img src="" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">Card 1</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
    </div>
</template>

<script>
export default {
	data() {
	return
	}
}
</script>

接著我們要回到 src 資料夾底下的 router/index.js 把 page 元件載入進來:

import Page from '@/components/pages/page';

這時候我們就可以在底下再新增一個路徑:

export default new VueRouter({
	routes: [
		{
            ...
        },
		{
			name: '分頁',
			path: '/page',
			component: Page,
		}
	],
});

此時運行起來，把網址改成 locahost:8080/#/page
就可以看到 page 元件了

接著我們來做連結的功能，到 App.vue 的 <div id="app"></div> 底下新增 Bootstrap 的 navbar
接著把 .nav-item 底下的 <a> 改成

<router-link to="/page"></router-link>

這時候點擊這個連結，我們就可以直接切換到 page 元件